<template>
  <div class="page_configure">
    <el-scrollbar style="height: 100%">
      <div class="page_configure_body">
        <tabsBox v-model="currentTab" :tabList="tabList"></tabsBox>
        <el-form class="page_form" :model="chartConfig">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="名称" label-width="40px" label-position="left">
                <el-input @input="changeChart($event, 'name')" :value="chartConfig.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="宽度" label-width="40px" label-position="left">
                <el-input-number
                  class="inputNumberContent"
                  :min="0"
                  @change="changeChart($event, 'width')"
                  controls-position="right"
                  :value="chartConfig.width"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="高度" label-width="40px" label-position="left">
                <el-input-number
                  :min="0"
                  @change="changeChart($event, 'height')"
                  class="inputNumberContent"
                  controls-position="right"
                  :value="chartConfig.height"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: 'chartConfigure',
    props: {},
    components: {},
    data() {
      return {
        tabList: [
          {
            label: '定制',
            value: 1,
            icon: 'el-icon-setting',
          },
          {
            label: '动画',
            value: 2,
            icon: 'el-icon-moon-night',
          },
          {
            label: '数据',
            value: 3,
            icon: 'el-icon-data-line',
          },
        ],
        currentTab: 1,
        chartConfig: {
          type: 'line',
          name: '',
          thumbnail: '@/assets/charts/line.png',
          width: 0,
          height: 0,
          option: {},
          position: {
            x: 0,
            y: 0,
          },
        },
      };
    },
    computed: {
      ...mapGetters(['currentChartIndex', 'currentChart']),
    },
    created() {
      this.chartConfig = Object.assign(this.chartConfig, this.currentChart);
    },
    mounted() {},
    methods: {
      changeChart(e, params) {
        console.log(e, params);
        this.$store.commit('UPDATE_CURRENT_CHART', {
          [params]: e,
        });
      },
    },
    watch: {
      currentChart: {
        handler(value) {
          this.chartConfig = Object.assign(this.chartConfig, this.currentChart);
        },
        deep: true,
      },
    },
    filters: {},
  };
</script>

<style scoped lang="scss">
  .page_configure {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid $text-grey;
    border-radius: 4px;
    .page_configure_body {
      overflow-x: hidden;
      padding: 10px 15px;
    }
    ::v-deep .page_form {
      margin-top: 20px;
      .el-input-number {
        width: 100%;
      }
    }
  }
</style>
